<template>
  <el-form class="" :model="user" label-width="100px">
    <el-form-item label="用户名称"
      ><el-input v-model="user.name"></el-input
    ></el-form-item>
    <el-form-item label="用户性别"
      ><el-input v-model="user.sex"></el-input
    ></el-form-item>
    <QuillEditor
      v-model:content="user.introduce"
      :options="editorOption"
      contentType="html"
      theme="snow"
    />

    <el-form-item label="用户类型" prop="userTypeId">
      <el-select v-model="user.userTypeId" placeholder="请选择用户类型">
        <el-option
          v-for="userType in userTypeList"
          :key="userType.id"
          :label="userType.type"
          :value="userType.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="update">更新</el-button>
      <el-button @click="goBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";

const OK = 200;
const router = useRouter();
const route = useRoute();

const user = ref({});
const userTypeList = ref([]);
const editorOption = ref({
  placeholder: "输入用户简介：",
  theme: "snow",
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block"],
      [{ header: 1 }, { header: 2 }],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ["clean"],
      ["link", "image"],
    ],
  },
});

const get = async (id) => {
  try {
    const res = await axios.get("/api/users/" + id);
    if (res.data.code === OK) {
      user.value = res.data.data;
    } else {
      ElMessage.error(res.data.message);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取用户信息失败");
  }
};

const update = async () => {
  try {
    const res = await axios.put("/api/users/", user.value);
    if (res.data.code === OK) {
      ElMessage.success("更新用户成功");
      router.push({ name: "UserList" });
    } else {
      ElMessage.error(res.data.message);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("更新用户失败");
  }
};

const getUserTypeList = async () => {
  try {
    const res = await axios.get("/api/userTypes");
    if (res.data.code === OK) {
      userTypeList.value = res.data.data;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取用户类型列表失败");
  }
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  const id = route.query.id;
  get(id);
  getUserTypeList();
});

watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      get(newId);
    }
  }
);
</script>

<style scoped="scoped"></style>
